import { useEffect, useState } from "react";

const CustomCursor: React.FC = () => {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [hover, setHover] = useState(false);

  useEffect(() => {
    const moveHandler = (e: MouseEvent) => {
      setPosition({ x: e.clientX, y: e.clientY });
    };
    window.addEventListener("mousemove", moveHandler);
    return () => window.removeEventListener("mousemove", moveHandler);
  }, []);

  useEffect(() => {
    const interval = setInterval(() => {
      setHover((h) => !h);
    }, 1000); // 呼吸节奏
    return () => clearInterval(interval);
  }, []);

  return (
    <div
      style={{
        pointerEvents: "none",
        position: "fixed",
        top: position.y,
        left: position.x,
        width: hover ? "16px" : "12px",
        height: hover ? "16px" : "12px",
        backgroundColor: "transparent",
        border: "2px solid black",
        borderRadius: "50%",
        transform: "translate(-50%, -50%)",
        transition: "all 0.3s ease",
        zIndex: 9999,
      }}
    />
  );
};

export default CustomCursor;
